<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changeName">修改名称</button>
    <button @click="changePrice">修改价格</button>
    <button @click="changeCar">修改汽车信息</button>
    <hr>
    <h2>{{ num }}</h2>
    <button @click="changeNum">点我加1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, reactive } from 'vue'

let car = ref({ brand: '奔驰', price: 10 })

//let car = reactive({ brand: '奔驰', price: 10 })

let num = ref(1);

console.log(car)


// function changeName() {
//   car.brand = '大众'
// }

// function changePrice() {
//   car.price += 10
// }

// function changeCar() {
//   Object.assign(car, { brand: '宝马', price: 20 })
// }

function changeCar() {
  car.value = { brand: '奥迪', price: 20 }
}

function changeNum() {
  num.value += 1
}


</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>